<template>
  <div>
    <div class="content-item">
      <el-form :model="baseInfo"
               inline>
        <el-row>
          <el-col :span="8">
            <el-form-item label="配置名称：">
              {{baseInfo.name}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="配置单元：">
              {{baseInfo.unit}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="适用类型：">
              {{baseInfo.applianceTypeName || '不限'}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="适用年级：">
              {{baseInfo.applianceGrade || '不限'}}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="content-item">
      <el-input v-model="queryString1"
                style="width: 200px;margin-bottom: 10px;"
                :placeholder="baseInfo.unit === '人员' ? '请输入学生学号或姓名':'请输入班级名称'"
                size="small"></el-input>
      <el-button type="primary"
                 size="small"
                 @click="query(1)">搜索</el-button>
      <TabList :tabData="tabData1"
               v-if="baseInfo.unit === '人员'"
               class="table-header-gray fixTab"
               :specCol="sepecCol"
               :columns="columns2"></TabList>
      <TabList :tabData="tabData1"
               v-else
               class="table-header-gray fixTab"
               :columns="columns1"></TabList>

      <p>已选人数【{{baseInfo.totalNum || 0}}】</p>
    </div>
  </div>
</template>
<script>
import {
  getSettingConfigInfoUsingGET
} from '@api/auto'
export default {
  data () {
    return {
      baseInfo: {},
      queryString1: '',
      tabData1: [],
      checkTabData1: [],
      columns1: [
        { label: '院系', prop: 'collegeName' },
        { label: '专业', prop: 'majorName' },
        { label: '年级', prop: 'gradeName' },
        { label: '班级', prop: 'className' },
        { label: '总人数', prop: 'totalStudent' },
        { label: '优先级', prop: 'weight' }
      ],
      columns2: [
        { label: '学号', prop: 'sn' },
        { label: '姓名', prop: 'name' },
        { label: '性别', prop: 'gender' },
        { label: '院系', prop: 'collegeName' },
        { label: '专业', prop: 'majorName' },
        { label: '班级', prop: 'className' }
      ],
      sepecCol: [
        { label: '性别', prop: 'gender', tem: `<span>{{$transSex(gender)}}</span>` }
      ]
    }
  },
  created () {
    this.getSettingConfigInfoUsingGET(JSON.parse(sessionStorage.editRow).id)
  },
  methods: {
    query (num) {
      let tabData = []
      if (this.baseInfo.unit === '班级') {
        this[`checkTabData${num}`].forEach(ele => {
          if (ele.className.includes(this[`queryString${num}`])) {
            tabData.push(ele)
          }
        })
      } else {
        this[`checkTabData${num}`].forEach(ele => {
          if (ele.sn.includes(this[`queryString${num}`]) || ele.name.includes(this[`queryString${num}`])) {
            tabData.push(ele)
          }
        })
      }
      this[`tabData${num}`] = tabData
    },
    getSettingConfigInfoUsingGET (id) {
      getSettingConfigInfoUsingGET(id).then(res => {
        this.baseInfo = res.data
        this.tabData1 = res.data.unit === '人员' ? res.data.studentList : res.data.classInfoDtoList
        this.checkTabData1 = res.data.unit === '人员' ? res.data.studentList : res.data.classInfoDtoList
        console.log(this.baseInfo, 'ddd')
      })
    }
  }
}
</script>
<style lang="less" scoped>
.baseInfo {
  display: flex;
  justify-content: space-between;
}
.tab-item {
  padding: 10px;
  border: 1px solid #cccccc;
  min-height: 500px;
  position: relative;
}
.fixTab {
  max-height: 480px;
  overflow: auto;
}
.choosed {
  position: absolute;
  bottom: 0px;
  left: 10px;
}
</style>
